<template>
	<div class="main-content">
		<ToolBar>
			<el-button style="float:left;" type="primary" icon="el-icon-plus" size="small" @click="editData(false)">添加</el-button>
			<div style="float: right">
				<el-input placeholder="请输入菜单名称！" size="small" style="width: 200px" v-model="params.name" @clear="search" clearable>
				</el-input>
				<el-button @click="search" type="success" icon="el-icon-search" size="small"></el-button>
			</div>
		</ToolBar>

		<el-table :data="dataList" border highlight-current-row height="calc(100% - 55px)" row-key="id" default-expand-all
		 :tree-props="{children:'children', hasChildren:'hasChildren'}">

			<el-table-column fixed="left" type="index" label="序号" width="50px">
			</el-table-column>

			<el-table-column prop="functionName" label="菜单名" sortable width="220px" align="left">
				<template slot-scope="scope" style="max-width: 40px !important;">
					<i :class="scope.row.icon"></i>&nbsp;&nbsp;{{scope.row.functionName}}
				</template>
			</el-table-column>

			<el-table-column prop="href" label="链接地址" align="left">
			</el-table-column>

			<el-table-column prop="displaySequence" label="显示顺序" align="center" width="100px">
			</el-table-column>

			<el-table-column prop="description" label="描述" align="left">
			</el-table-column>


			<el-table-column prop="enable" width="100" label="是否启用" align="center">
				<template slot-scope="scope">
					<el-switch size="small" @change="enableSwitch(scope.row)" v-model="scope.row.enable" active-color="#13ce66"
					 inactive-color="#ff0000">
					</el-switch>
				</template>
			</el-table-column>

			<el-table-column label="操作" width="180" align="center">
				<template slot="header" slot-scope="scope">
					<HelpHint content=" 编辑 修改 删除 菜单">操作</HelpHint>
				</template>
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" content="新增子菜单" placement="top-end">
						<el-button @click="addChild(scope.row)" type="success" icon="el-icon-plus" circle size="small"></el-button>
					</el-tooltip>
					<el-tooltip class="item" v-if="scope.row.delete == false" effect="dark" content="编辑" placement="top-end">
						<el-button @click="editData(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
					</el-tooltip>
					<el-tooltip class="item" v-if="scope.row.delete == false" effect="dark" content="删除" placement="top-end">
						<el-button @click="deleteData(scope.row.id)" type="danger" icon="el-icon-delete" circle size="small"></el-button>
					</el-tooltip>
					<el-tooltip class="item" v-else effect="dark" content="恢复" placement="top-end">
						<el-button @click="deleteData(scope.row.id)" icon="el-icon-check" circle size="small"></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-dialogDrag :title="title" height="400px" :close-on-click-modal="false" :close-on-press-escape="false"
		 :visible.sync="dialogFormVisible" size="mini">
			<el-form :model="currentData">
				<el-row>
					<el-col :span="12">
						<el-form-item label="菜单名" :label-width="formLabelWidth">
							<el-input v-model="currentData.functionName" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="图标" :label-width="formLabelWidth">
							<el-input v-model="currentData.icon" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="链接地址" :label-width="formLabelWidth">
							<el-input v-model="currentData.href" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="显示顺序" :label-width="formLabelWidth">
							<el-input v-model="currentData.displaySequence" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="权限标识" :label-width="formLabelWidth">
							<el-input v-model="currentData.permission" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="描述" :label-width="formLabelWidth">
							<el-input v-model="currentData.description" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item size="small" label="是否启用:" :label-width="formLabelWidth">
							<el-switch :disabled="dialogFormReadOnly" style="float: left;height: 32px;" v-model="currentData.enable"
							 active-color="#13ce66" inactive-color="#ff0000">
							</el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="12">

					</el-col>
				</el-row>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveData">确 定</el-button>
			</div>
		</el-dialog>


	</div>
</template>


<script>
	import ToolBar from '@/components/ToolBar.vue';
	import HelpHint from '@/components/HelpHint.vue';
	import {
		save,
		deleteById,
		enableSave,
		findById,
		menuList
	} from '../../api/menu';

	export default {
		data() {
			return {
				baseTitle: "菜单信息",
				title: "菜单信息",
				params: {
					name: '',
				},
				dataList: [],
				currentData: {},
				parentData: {},
				dialogFormVisible: false,
				dialogFormReadOnly: false,
				formLabelWidth: '120px',
			}
		},
		created: function() {

		},
		mounted: function() {
			this.loadList();
		},
		methods: {
			loadList: function() {
				menuList({
					functionName: this.params.name
				}).then(data => {
					this.dataList = data;

				}).catch(exception => {

				});
			},
			search() {
				this.loadList();
			},
			enableSwitch(data) {
				this.currentData = JSON.parse(JSON.stringify(data));
				enableSave(this.currentData).then(res => {
					for (var key in data) {
						data[key] = res[key];
					}
					this.currentData = data;
					this.$message({
						message: '保存成功!',
						type: 'success'
					});
				}).catch(exception => {});
			},
			addChild(data) {
				this.parentData = data;
				this.currentData = {};
				this.currentData["parentId"] = data["id"];
				this.currentData["enable"] = data["enable"];
				this.currentData["displaySequence"] = data["displaySequence"] + '1';
				this.title = "新增菜单 ——上级【" + data["functionName"] + "】";
				this.dialogFormVisible = true;
			},
			editData(data) {
				if (data != false) {					
					this.parentData =  this.getParentMenu(this.dataList,data.parentId);
					this.currentData = JSON.parse(JSON.stringify(data));
					this.title = "编辑菜单【" + data["functionName"] + "】";
				} else {
					this.parentData = null;
					this.currentData = {};
					this.currentData["parentId"] = 0;
					this.currentData["enable"] = true;
					this.title = "新增菜单";
				}
				this.dialogFormVisible = true;
			},
			saveData() {
				this.dialogFormVisible = false;
				save(this.currentData).then(res => {
					if(this.parentData ){
						if(this.parentData.children.length == 0 || !this.currentData.id){
							this.parentData.children.push(res);
						}else{
							this.parentData.children.forEach((record, index) => {
								if (record.id == res.id) {
									if (record.id == res.id) {
										for (var key in record) {
											if(key != "children"){
												record[key] = res[key];
											}											
										}
									}
								}
							});
						}
					}else{
						if(this.dataList.length == 0 || !this.currentData.id) {
							this.dataList.push(res);
						}else if(this.dataList){							
							if(res.parentId == 0){
								this.dataList.forEach((record, index) => {
									if (record.id == res.id) {
										for (var key in record) {
											if(key != "children"){
												record[key] = res[key];
											}											
										}
									}
								});
							}else{
								this.parentData =  this.getParent(this.dataList,res.id);
								this.parentData.children.forEach((record, index) => {
									if (record.id == res.id) {
										for (var key in record) {
											if(key != "children"){
												record[key] = res[key];
											}											
										}
									}
								});								
							}
						}
					}
					this.currentData = res;
					this.$message({
						message: '保存成功!',
						type: 'success'
					});
					this.dialogFormVisible = false;
				}).catch(exception => {

				});
			},
			deleteData(id) {
				deleteById(id).then(res => {
					this.$message({
						message: '删除成功!',
						type: 'success'
					});
					this.loadList();
				}).catch(exception => {

				});
			},
			getParentMenu(json, nodeId) {
				if(json == undefined || json.length <=0){
					return null;
				}
				//1.第一层 root 深度遍历整个JSON
				for (var i = 0; i < json.length; i++) {
					var obj = json[i];
					if(obj && obj.id && obj.id  == nodeId){
						return obj;
					}else if(obj && obj.children && obj.children.length > 0){
						obj = this.getParentMenu(obj.children,nodeId);
						if(obj && obj.id && obj.id  == nodeId){
							return obj;
						}
					}else{
						continue;
					}
				}
				return null;
			}
		},
		components: {
			ToolBar,
			HelpHint
		}
	}
</script>
<style lang="scss">

</style>
